<template>
  <div class="container">
    <div class="block">
      <el-timeline>
        <el-timeline-item
          v-for="(vr, index) in viewRecordList"
          :key="vr.id"
          :timestamp="vr.viewTime | myTime"
          type="primary"
          :index="index"
          ><artical-item :post="vr.post">
            <template slot="operation">
              <div
                class="delete"
                @click="deleteRecord(vr.recordId)"
              >
                <i class="el-icon-delete"></i>
              </div> </template
          ></artical-item>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-skeleton :loading="loading" :rows="6" animated />
    <el-empty v-if="page.total == 0 && !loading" description="空空如也~"></el-empty>
  </div>
</template>
  <script>
import ArticalItem from "../Artical/ArticalItem.vue";
import postApi from "@/axios/postApi";
import PageMixin from "@/mixins/PageMixin";

export default {
  components: { ArticalItem },
  mixins: [PageMixin],
  data() {
    return {
      viewRecordList: [],
    };
  },
  methods: {
    getList() {
      postApi
        .getViewRecords({
          current: this.page.current,
          size: this.page.size,
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === this.$status.SUCCESS_CODE) {
            this.viewRecordList = this.viewRecordList.concat(data.data.records);
            this.page.current = data.data.current;
            this.page.total = data.data.total;
            this.page.pages = data.data.pages;
            //关闭加载动画
            this.loading = false;
          } else this.$message.error("获取数据出错");
        })
        .catch((e) => {
          console.error(e);
          this.$message.error("获取数据出错");
        });
    },
    load() {
      this.page.current++;
      this.getList();
    },
    deleteRecord(id) {
      postApi.deleteViewRecord(id)
      .then(({ data }) => {
          console.log(data);
          if (data.code === this.$status.SUCCESS_CODE) {
            const i = this.viewRecordList.findIndex(v=>v.recordId == id)
            this.viewRecordList.splice(i,1)
            this.$message.success("删除成功");
          } else this.$message.error("获取数据出错");
        })
    }
  },
  created() {
    this.page.size=3
    this.getList();
  
  },
};
</script>
<style scoped lang="less">
.container {
  padding: 5px;
}
@import '@/assets/less/common.less';
    .delete {
        cursor: pointer;
        &:hover {
            color: black;
        }
    }
</style>
 